<template>
    <div>
        <div v-show="tempEngine.imgs[imgIndex] && isEdit" class="icon" @click="setLink">
            <i v-show="isEdit" class="iconfont ali-setting"></i>
        </div>
        <van-swipe 
             @change="change" 
            :autoplay="tempEngine.autoplay" 
            :indicator-color="tempEngine.indicatorColor"
            >
            <van-swipe-item v-for="(img, i) in tempEngine.imgs" :key="i">
                <van-row type="flex" justify="center" >
                    <upload :img="img" :isBanner="isBanner" :boxClass="boxClass"></upload>
                </van-row>
            </van-swipe-item>
        </van-swipe>
        <section class="slider" v-show="isShow">
            <link-set ref="link" @close="close" :setTemp="tempEngine.imgs[imgIndex]"></link-set>
        </section>
    </div>
</template>
<script>
import upload from '@/components/upload'
import linkSet from '@/components/linkSet'
import { mapGetters } from 'vuex'
export default {
    components: { upload, linkSet },
    computed: {
        ...mapGetters(['isEdit']),
    },
    data() {
        return {
            isShow: false,
            isBanner: true,
            boxClass: {
                div: {padding: '70px'},
                icon: {'font-size': '50px', color: '#C0C4CC'}
            },
            imgIndex: 0,
            autoPaly: 0
        }
    },
    props: {
        tempEngine: {
            type: Object,
            default(){}
        }
    },
    methods: {
        close(){
            this.isShow = false
            this.tempEngine.autoplay = this.autoPaly;
        },
        change(index){
            this.imgIndex = index
        },
        async setLink(){
            this.autoPaly = this.tempEngine.autoplay;
            this.tempEngine.autoplay = 0;
            await this.$refs.link.clear();
            this.isShow = true
        }
    }
}
</script>
<style scoped>
.icon{
    position: absolute;
    width: 32px;
    height: 32px;
    background-color: #909399;
    z-index: 1;
}
.ali-setting{
    color: #FFF;
    font-size: 30px;
}
.slider{
    width: 90%;
    margin-left: 5%;
    position: fixed;
    top: 20%;
    left: 0;
    z-index: 200;
}
</style>
